<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>018在Vue中使用插槽</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <child :content="data"></child>

    <h6>第二种方法：插槽slot</h6>
    <child-two>
      <p>hello hello</p>
    </child-two>

    <h6>具名插槽</h6>
    <child-sort>
      <div slot="header">header</div>
      <div slot="footer">footer</div>
    </child-sort>
  </div>
  <script>
    var vm = new Vue({
      el: "#root",
      data: {
        data: "<p>Claire</p>"
      },
      components: {
        "child": {
          props:{
            content: {
              type: String
            }
          },
          template: `<div>
                        <p>child</p>
                        <div v-html="this.content"></div>
                      </div>`

        },
        // 另一种方法： 插槽
        "childTwo": {
          template: `<div>
                        <p>child</p>
                        <slot>默认内容</slot>
                      </div>`
        },
        // 具名插槽
        "childSort": {
          template: `<div>
                        <slot name="header"></slot>
                        <div class="content">content</div>
                        <slot name="footer"></slot>
                     </div>`
        }
      }
    })
  </script>
</body>
</html>